import React, { useState } from 'react'
// import { useState } from 'react'
import { getHomeData } from '@/apis'
import { useNavigate, useLoaderData } from "react-router-dom";

import { useSelector, useDispatch } from 'react-redux';
import { selectRecommend, selectStory, changeDate } from '../stores/homeSlice';

import styles from './css/home/home.module.scss'
import Prefecture from '../components/Prefecture';
import ArticleModule from '../components/ArticleModule';

export async function loader() {
  const res = await getHomeData()
  return { recommend: res.data.data[0], story: res.data.data[1] }
}

export default function Home() {
  const navigate = useNavigate()
  const dispatch = useDispatch()

  const homeData = useLoaderData();
  dispatch(changeDate(homeData))

  // const [n, setN] = useState(10);

  const recommend = useSelector(selectRecommend);
  const story = useSelector(selectStory);

  function article() {
    return story?.data.filter((o, i) => i < 2)
  }


  return (
    <div className={styles.home}>
      <div className={styles.swiper}>
        <a href="#" className={styles.img} style={{ background: "url('https://oss.51cocoa.com/upload/images/20230120/8d242beeb2089ed7a5401d4e776c03d6.jpg') no-repeat", backgroundSize: 'cover', backgroundPosition: 'center' }}></a>
      </div>

      <div className={'container ' + styles.home}>
        {/* 电梯蓝标题 */}
        <div className={styles.cake + ' ' + styles['cake-menu']}>
          <a href="#"><img src="//oss.51cocoa.com/upload/images/889439561ba83c8ce1cdb960f0e90cf1.jpg" alt="新品" title="新品" /></a>
          <a href="#"><img src="//oss.51cocoa.com/upload/images/889439561ba83c8ce1cdb960f0e90cf1.jpg" alt="新品" title="新品" /></a>
          <a href="#"><img src="//oss.51cocoa.com/upload/images/889439561ba83c8ce1cdb960f0e90cf1.jpg" alt="新品" title="新品" /></a>
          <a href="#"><img src="//oss.51cocoa.com/upload/images/889439561ba83c8ce1cdb960f0e90cf1.jpg" alt="新品" title="新品" /></a>
          <a href="#"><img src="//oss.51cocoa.com/upload/images/889439561ba83c8ce1cdb960f0e90cf1.jpg" alt="新品" title="新品" /></a>
        </div>
        {recommend?.data.map((item) => (
          <Prefecture key={item.sort} item={item} />
        ))}
        <ArticleModule title={story?.title.split('·')[0]} article={article()} />
      </div>


    </div>
  )
}
